<template>
  <div>
    <Row>
      <Card>
        <div>
          <Input v-model="searchObj.name" placeholder="请输入用户昵称搜索..." class="searchItem"/>
          <Input v-model="searchObj.applyMobile" placeholder="请输入手机号码搜索..." class="searchItem"/>
          <Input v-model="searchObj.managerName" placeholder="请输入客户经理姓名搜索..." class="searchItem"/>
          <Select v-model="searchObj.status" placeholder="请选择状态" class="searchItem">
            <Option :value="1">已否决</Option>
            <Option :value="2">初审否决</Option>
            <Option :value="3">已放款</Option>
            <Option :value="4">申请中</Option>
            <Option :value="5">初审通过</Option>
          </Select>
          <Button type="primary" style="" class="searchButton" icon="search" @click="search()">搜索</Button>
          <Button @click="cancel">取消</Button>
        </div>
        <div class="edittable-con-1 list" style="">
          <Table border ref="selection" :columns="columns" :data="list"></Table>
        </div>
        <div style="text-align: center;margin-top: 20px">
          <Page :current="pageId" :total="totalPage" :page-size="10" @on-change='search'></Page>
        </div>
      </Card>
    </Row>
  </div>
</template>

<script>
  import { getLoanApplicationList } from '@/api/user'

  export default {
    name: 'user-customer',
    data () {
      return {
        searchObj: {
          cid: parseInt(this.$route.query.id),
          name: '',
          applyMobile: '',
          status: '',
          pageId: 1
        },
        columns: [
          {
            title: '编号',
            align: 'center',
            key: 'id',
            width: 100
          },
          {
            title: '客户姓名',
            align: 'center',
            key: 'applyName',
            width: 120
          },
          {
            title: '身份证号码',
            align: 'center',
            key: 'IDNumber'
            ,
            width: 150
          },
          {
            title: '手机号码',
            align: 'center',
            key: 'applyMobile',
            width: 120
          },
          {
            title: '来源渠道',
            align: 'center',
            width: 120,
            render: (h, params) => {
            switch (parseInt(params.row.channelSrc)) {
              case 4:
                return h('Tag', {
                  props: {
                    color: '#2d8cf0'
                  }
                }, '其他渠道');
                break;
              case 3:
                return h('Tag', {
                  props: {
                    color: '#2db7f5'
                  }
                }, '入围公司');
                break;
              case 2:
                return h('Tag', {
                  props: {
                    color: '#5cadff'
                  }
                }, '同行渠道');
                break;
              case 1:
                return h('Tag', {
                  props: {
                    color: '#2b85e4'
                  }
                }, '寿险渠道');
                break;
            }
          }
          },
          {
            title: '贷款金额',
            align: 'center',
            key: 'loanAmount',
            width: 120
          },
          {
            title: '推荐人',
            align: 'center',
            key: 'name',
            width: 180
          },
          {
            title: '状态',
            align: 'center',
            width: 180,
            render: (h, params) => {
              switch (parseInt(params.row.status)) {
                case 5:
                  return h('Tag', {
                    props: {
                      color: '#2d8cf0'
                    }
                  }, '初审通过');
                  break;
                case 4:
                  return h('Tag', {
                    props: {
                      color: '#5cadff'
                    }
                  }, '申请中');
                  break;
                case 3:
                  return h('Tag', {
                    props: {
                      color: '#2d8cf0'
                    }
                  }, '已放款');
                  break;
                case 2:
                  return h('Tag', {
                    props: {
                      color: '#2d8cf0'
                    }
                  }, '初审否决');
                  break;
                case 1:
                  return h('Tag', {
                    props: {
                      color: '#5cadff'
                    }
                  }, '已否决');
                  break;
              }
            }
          },
          {
            title: '操作',
            align: 'center',
            key: 'handle',
            render: (h, params) => {
              return h('div', {style:{padding:'10px'}},[
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: { marginRight: '10px', marginBottom: '5px' },
                  on: {
                    click: () => {
                      this.goDetail(params.row.id, params.row.cid)
                    }
                  }
                }, '查看详情'),
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: { marginRight: '10px', marginBottom: '5px' },
                  on: {
                    click: () => {
                      this.goRecord(params.row.id)
                    }
                  }
                }, '跟进记录'),
                h('Poptip', {
                  props: {
                    confirm: true,
                    title: '您确定要删除这条数据吗?',
                    transfer: true
                  },
                  on: {
                    'on-ok': () => {
                      this.del(params.row.id)
                    }
                  }
                }, [
                  h('Button', {
                    props: {
                      type: 'error',
                      size: 'small'
                    }
                  }, '删除')
                ])
              ])
            }
          }
        ],
        list: [],
        pageId: 1,
        totalPage: 10
      }
    },
    methods: {
      getList () {
        getLoanApplicationList(this.searchObj).then(data => {
          this.list = data.data
          this.pageId = data.current_page
          this.totalPage = data.total
        })
      },
      goDetail (id, cid) {
        this.$router.push({
          name: 'user_customer_detail',
          query: {
            id: id,
            cid: cid
          }
        })
      },
      goRecord (id) {
        this.$router.push({
          name: 'user_customer_record',
          query: {
            id: id
          }
        })
      },
      search () {
        if (arguments[0]) {
          this.searchObj.pageId = arguments[0]
        }
        this.getList()
      },
      cancel () {
        this.searchObj = {
          cid: parseInt(this.$route.query.id),
          name: '',
          applyMobile: '',
          status: '',
          pageId: 1
        }
        this.getList()
      }
    },
    mounted () {
      this.getList()
    }
  }
</script>

<style scoped>

</style>
